<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据可视化</title>
		<link rel="stylesheet" href="css/css.css">
	</head>
	<body>
		<!--  头部的盒子 -->
		<header>
			<h1>数据可视化</h1>
			<div class="showTime">
			</div>
		</header>
		<script>
			// 格式： 当前时间：2020年3月17-0时54分14秒
			var t = null;
			t = setTimeout(time, 1000); //開始运行
			function time() {
				clearTimeout(t); //清除定时器
				dt = new Date();
				var y = dt.getFullYear();
				var mt = dt.getMonth() + 1;
				var day = dt.getDate();
				var h = dt.getHours(); //获取时
				var m = dt.getMinutes(); //获取分
				var s = dt.getSeconds(); //获取秒
				document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" +
					s + "秒";
				t = setTimeout(time, 1000); //设定定时器，循环运行     
			}
		</script>
		<section class="mainbox">
			<div class="column">
				<div class="panel bar">
					<h2>柱形图-就业行业<a href="javascript:;">2019</a>
						<a href="javacript:;"> 2020</a>
					</h2>
					<div class="chart"></div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel line">
					<h2>折线图-人员变化</h2>
					<div class="chart"></div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel pie">
					<h2>饼形图-年龄分布</h2>
					<div class="chart"></div>
					<div class="panel-footer"></div>
				</div>
			</div>
			<div class="column">
				<!-- 中间模块 -->
				<div class="no">
					<div class="no-hd">
						<ul>
							<li>12345</li>
							<li>67890</li>
						</ul>
					</div>
					<div class="no-bd">
						<ul>
							<li>前端需求人数</li>
							<li>市场供应人数</li>
						</ul>
					</div>
				</div>
				<div class="map">
					<div class="map1"></div>
					<div class="map2"></div>
					<div class="map3"></div>
					<div class="chart"></div>
				</div>
			</div>
			<div class="column">
				<div class="panel bar1">
					<h2>柱状图-技能掌握</h2>
					<div class="chart"></div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel line1">
					<h2>折线图-播放量</h2>
					<div class="chart"></div>
					<div class="panel-footer"></div>
				</div>
				<div class="panel pie1">
					<h2>饼形图-地区分布</h2>
					<div class="chart"></div>
					<div class="panel-footer"></div>
				</div>
			</div>
		</section>
		<script src="js/flexible.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/index.js"></script>
		<script src="js/china.js"></script>
		<script src="js/myMap.js"></script>
	</body>
</html>
